<template>
	<view>
	
	<view class="top">
		<view class="money">
			<view class="">
				总工资:
			</view>
			<view class="" style="font-size: 70rpx;font-weight: 600;">
				￥{{money}}
			</view>
		
		</view>
		
		<view class="" @click="show = true" style="color: white; text-align: right;margin: 20rpx;">
			{{value1}}>
		</view>
	</view>


		<view class="tab">
			<u-subsection :list="list" mode="button" @change="sectionChange" :current="current"></u-subsection>
		</view>

		<view class="">
			<view class="list" v-if="current==0">
				<view class="u-page">
					<u-list >
						<u-list-item v-for="(item, index) in timeList" :key="index">
							<u-cell>
								<template slot='label'>
									<view class="time">
										<view class="">
											{{item.time}}
										</view>

										<view class="">
											计件{{item.num}}
										</view>
										
										<view class="">
											总工资{{item.num*3}}
										</view>
									</view>
								</template>
							</u-cell>
						</u-list-item>
					</u-list>
				</view>
			</view>
			<view class="list" v-if="current==1">
				<u-list @scrolltolower="scrolltolower">
					<u-list-item v-for="(item, index) in clothesList" :key="index">
						<u-cell>
							<template slot='label'>
								<view>
									<view class="">
										{{item.clothesName}}
									</view>

									<view class="">
										{{item.colorName}}
									</view>

									<view class="">
										{{item.sizeName}}
									</view>

									<view class="clothes">
										<view class="">
											计件{{item.num}}
										</view>
										<view class="">
											总工资{{item.num*3}}
										</view>
									</view>
								</view>
							</template>
						</u-cell>
					</u-list-item>
				</u-list>
		</view>
	</view>




	<template>
		<view>
			<u-datetime-picker format="yyyy-MM" :show="show" mode="year-month" @confirm="confirm"></u-datetime-picker>
		</view>
	</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money:0,
				timeList: [],
				clothesList: [],
				list: ['按时间', '按款式'],
				current: 0,
				value1: "",
				show: false
			}
		},
		methods: {
			getMoneyByClothes() {
				var that = this
				this.api.post("/employee/getMyMoneyByClothesType", {
					time: that.value1,
					employeeId: that.$store.state.employeeId
				}).then(res => {
					console.log(res);
					that.clothesList = res.data
				})
			},
			getMoneyByTime() {
				var that = this
				this.api.post("/employee/getMyMoneyByTime", {
					time: that.value1,
					employeeId: that.$store.state.employeeId
				}).then(res => {
					console.log(res);
					that.timeList = []
					var totalMoney=0
					Object.keys(res.data).sort().forEach((key) => {
					totalMoney=res.data[key]*3+totalMoney
						var a = {
							time: key,
							num: res.data[key]
						}
						that.timeList.push(a)
					
					})
					that.money=totalMoney
				})
			},
			sectionChange(index) {
				console.log(index)
				this.current = index;
				if (index == 0) {
					this.getMoneyByTime()
				} else {
					this.getMoneyByClothes()
				}
			},
			timestampToTime(timestamp) {
				// 时间戳为10位需*1000，时间戳为13位不需乘1000
				var date = new Date(timestamp);
				var Y = date.getFullYear() + "-";
				var M =
					(date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1);

				return Y + M
			},
			confirm(e) {
				console.log(e)
				this.value1 = this.timestampToTime(e.value)
				this.show = false
				this.getMoneyByTime()
			},
		},
		onLoad() {
			this.value1 = this.timestampToTime(Date.now())
			this.getMoneyByTime()
		}

	}
</script>

<style>
.time{
	display: flex;
	justify-content: space-between;
}
.clothes{
	display: flex;
	justify-content: space-between;
}
.top{
	width: 100%;
	height: 300rpx;
    background-color: #333333;
}
.money{
	height: 200rpx;
	width: 100%;
    background-color: #333333;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
}
.tab{
	width: 100%;
	    background-color: #333333;
}
</style>
